<template>
  <!-- 应用容器 -->
  <div :class="[{ night: isNightMode }, 'app']" id="app">
    <!-- 侧边栏和内容容器 -->
    <el-container style="height: 100vh;">
      <!-- 侧边栏 -->
      <el-aside v-if="isAuthenticated" width="200px" :style="{ backgroundColor: isNightMode ? '#2c3e50' : '#517d7d' }">
        <!-- 菜单项 -->
        <el-menu 
          default-active="dashboard" 
          class="el-menu-vertical-demo" 
          @select="handleSelect" 
          text-color="#fff" 
          active-text-color="#ffd04b"
          :background-color="isNightMode ? '#2c3e50' : '#517d7d'">
          <!-- 仪表盘菜单项 -->
          <el-menu-item index="dashboard"><i class="el-icon-s-home"></i> 仪表盘</el-menu-item>
          <!-- 用户管理菜单项（仅管理员可见） -->
          <el-menu-item v-if="role === 'admin'" index="users"><i class="el-icon-user"></i> 用户管理</el-menu-item>
          <!-- 订单管理菜单项 -->
          <el-menu-item index="orders"><i class="el-icon-s-order"></i> 订单管理</el-menu-item>
          <!-- 商品管理菜单项 -->
          <el-menu-item index="products"><i class="el-icon-goods"></i> 商品管理</el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主体内容容器 -->
      <el-container>
        <!-- 顶部导航栏 -->
        <el-header :style="{ backgroundColor: isNightMode ? '#2c3e50' : '#517d7d', color: 'white', textAlign: 'right', padding: '0 20px' }">
          <!-- 夜间模式切换按钮 -->
          <el-button @click="toggleNightMode" round>{{ isNightMode ? '白天' : '夜间' }}</el-button>
          <!-- 用户信息下拉菜单 -->
          <el-dropdown v-if="isAuthenticated && user" trigger="click">
            <!-- 用户头像 -->
            <span class="el-dropdown-link" style="cursor: pointer;">
              <img v-if="avatarUrl" :src="avatarUrl" class="avatar-img">
              <div style="color:white;">
                <!-- 用户名 -->
                {{ user.username }} <i class="el-icon-arrow-down el-icon--right"></i>
              </div>
            </span>
            <!-- 用户下拉菜单项 -->
            <el-dropdown-menu slot="dropdown">
              <!-- 查看账号信息 -->
              <el-dropdown-item @click.native="viewProfile">账号信息</el-dropdown-item>
              <!-- 更换头像 -->
              <el-dropdown-item @click.native="changeAvatar">更换头像</el-dropdown-item>
              <!-- 注销 -->
              <el-dropdown-item divided @click.native="logout">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <!-- 主要内容区域 -->
        <el-main>
          <!-- 路由视图 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    // 映射 Vuex 中的状态到组件的计算属性
    ...mapState(['isAuthenticated', 'role', 'user', 'avatarUrl', 'isNightMode']),
  },
  methods: {
    // 处理菜单选择
    handleSelect(key) {
      this.$router.push({ name: key });
    },
    // 注销
    logout() {
      this.$store.dispatch('logout');
      this.$router.push('/login');
    },
    // 查看用户信息
    viewProfile() {
      this.$router.push({ name: 'profile' });
    },
    // 更换头像
    changeAvatar() {
      this.$router.push({ name: 'change-avatar' });
    },
    // 切换夜间模式
    toggleNightMode() {
      this.$store.dispatch('toggleNightMode');
    }
  }
};
</script>

<style>
#app {
  display: flex;
  height: 100vh;
}

.el-menu-item {
  font-size: 16px;
}

.avatar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 70px;
  position: relative;
  top: 20px;
}

.night {
  background-color: #34495e;
  color: #ecf0f1;
}

.night .el-menu-vertical-demo {
  background-color: #2c3e50;
}

.night .el-header {
  background-color: #2c3e50;
}

.night .el-aside {
  background-color: #2c3e50;
}
</style>
